<template>
    <view :class="{'public_confirmPop_container':true,'show':show}" v-if="show">
        <view class="maskConfirm"></view>
        <view :class="'publicConfirmPopBox ' + (config.myClsName ? config.myClsName : '')">
            <view class="publicConfirmPop">
                <view class="confirmCon">
                    <view class="h5" v-if="config.title.text">
                        <block v-if="config.icon || config.tipType">
                            <image class="s" :src="config.icon" mode="aspectFill" v-if="config.icon"></image>
                            <image class="s" :src="`${imgPath}/${config.tipType == 'warning' ? 'tip_icon' : 'chosedPost_icon'}.png${imgVersion}`" mode="aspectFill" v-else></image>
                        </block>
                        <text :style="config.title.style">{{config.title.text}}</text>
                    </view>
                    <view class="tipbox">
                        <block v-for="(p,ind) in config.tip" :key="'p_' + ind">
                            <view class="p"  :style="p.style">{{p.text}}</view>
                        </block>
                    </view>
                </view>
                <view class="confirmBottom" v-if="config.cancel.show || config.confirm.show">
                    <view class="cancel a" @click="hideModal" v-if="config.cancel.show" :style="config.cancel.style">{{config.cancel.text}}</view>
                    <view class="confirm a" @click="cocnfirmModal" v-if="config.confirm.show"  :style="config.confirm.style">{{config.confirm.text}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    emits:['hidepop'],
    props:{
        // 弹窗的相关配置
        config:{
            type:Object,
            default:{
                tipType:'', //success,warning  分别对应32中图标
                icon:'', //有图标对应图标  没图标 看tipType  ,
                myClsName:'', //弹窗类名  可以自定义样式
                title:{
                    text:'',
                    style:'',
                },
                tip:[{
                    text:'',
                    style:''
                }],//提示
                cancel:{
                    show:true,
                    text:'取消',
                    style:'', //风格样式
                    clickFun:function(){},
                },
                confirm:{
                    show:true,
                    text:'确定',
                    style:'', //风格样式
                    clickFun:function(){},
                },
            },
        },

        // 弹窗显隐
        show:{
            type:Boolean,
            default:false,
        }
    },
    data(){
        return{
            imgPath:app.globalData.masterDomain + '/static/images/miniprograme/job',
            imgVersion:'?v=' + app.globalData.imgVersion
        }
    },
    methods:{

        // 关闭模态弹窗
        hideModal(){
            const that = this;
            if(that.config.cancel.clickFun){
                that.config.cancel.clickFun();
            }
            this.$emit('hidepop');
        },

        // 点击确认按钮
        cocnfirmModal(){
            const that = this;
            if(that.config.confirm.clickFun){
                that.config.confirm.clickFun();
            }
            this.$emit('hidepop');
        },


    },
}
</script>
<style scoped src="./modelCon.css">

</style>